<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		 1.控制字体：font-family   font-size  font-weight
		 2.控制文本布局：text-align   line-height  letter-spacing  word-spacing
		 3.文本修饰效果：text-decoration   text-shadow
		 4.处理文本效果：white-space
		 -->
		 <style>
			 /* 对 */
			 /* css3语法：选择器{
				         属性：属性值；
						 属性：属性值‘
						  。。。。
						  }
						叫法：一个样式
			 */
			body div#d1{/* 通过加权方式，锁定元素   权值：102*/
				color: #ff0000;
				/* 知识点1：文本格式化属性控制字体 
				font-family: 字体家族，指定字体形式
				*/
				font-family: 宋体;
				/*设置多个字体:浏览器会按照顺序寻找可用字体
				考虑用户体验,用户系统有什么字体,优先指定字体
				通常与统配选择器使用    *{}
				*/
				/* 知识点2：文本格式市举行控制字体
				 font-size:字体大小属性，与单位共存
				 单位  px像素   使用特点：绝对值、pc端
				      em   相对单位，理解：倍数
					            使用特点：相对于父元素按照倍数方式、移动端
				 */
				/* 知识点3：文本格式化属性控制字体
				 font-weight:字体粗细属性，不存在单位
				            属性值：数值【100 200 300  ...  900】
							常用值：400
								   单词【400==normal、bold、light】
				使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
				 */
				font-weight: 500;
				font-size: 1em;
				/* 补充：1.英文大写；2.首字母大写；3.段落开始间距200px */
				/* text-transform: uppercase;
				text-transform: capitalize; */
				/* text-indent: 200px; */
			}
			div#d1{ 
				/* ba ckground-col or: #411eaa; */
				color: #e4393c;
				/* 知识点4：文本格式化属性控制文本格式【对齐、间隙】 
				text-align：文本对齐属性
				left|right|center|justify：两端对齐,用于弹性布局
				*/
			   text-align: justify;
			   /* 知识点5：文本格式化属性控制文本格式【对齐、间隙】
				行高属性  line-height:文本垂直效果
				使用方式：1.高度属性,属性值一致
				         2.在高度属性上加行高属性：属性值一致
				*/
			   border:1px solid red;
			   height: 400px;
			   line-height: 100px;
			   /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间的距离*/
			   /* 知识点6：letter-spacing:设置字符之间的间隙
				  知识点7：word-spacing:设置单词之间间隙
				*/
			   letter-sp acing: 3px;
			   word-spacing: 10px;;
			}
			#d1{
			
				backgr ound-col or: black;
				color: red;
			}
			a.c1{/*权值：11*/
				/* 知识点8：text-decoration  修饰超链接样式
				 使用方法：与通配符一起使用，设置全局页面超链接样式
				 属性值：none去下划线|underline|line-through
				 */
				text-decoration: line-through;
				/* 知识点9：text-shadow  修饰文本阴影
				   属性值：X轴  Y轴   blur模糊距离  color
				 */
				text-shadow: 5px 5px 5px #ff0;
			}
			p{
				border: 1px solid red;
				/* 知识点10：文本换行效果
				 white-space:  文本换行属性
				 属性值：nowrap不换行,只显示一行超出部分隐藏   跟overfolow:hidden 隐藏一同使用
				       |pre保存空格和回车|normal
				 */
				white-space: nowrap;
				overflow: hidden;
			}
		 </style>
		 
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】
		         id选择器，通过加权找到div，添加颜色
		 -->
		 <div  id="d1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo recusandae iste illo quis, odio hic distinctio ipsa maiores asperiores ipsum, perspiciatis nostrum sapiente deserunt obcaecati tenetur error? Laborum, quia ducimus.</div>
		 <hr>
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性 
		 知识点7：text-decoration属性：设置超链接效果
		 -->
		 <a class="c1 c2" href="http://tsgzy.edu.cn">实现跳转【跳转方式：6种】</a>
		 <div style="hreight: 800px;"></div>
		 <marquee>
			 <h4>处理文本效果</h4>
			 
		 </marquee>
		 <p>Lorem ipsum dolor sit
		  amet consectetur adipisicing elit.
		   Consequuntur ex ipsum excepturi 
		   veniam optio ut? Dignissimos 
		   architecto error nihil fugit
			a tempore, ullam dolorem, eveniet 
			molestiae illum sit sequi laborum.
			 Lorem ipsum dolor sit amet consectetur, 
			 adipisicing elit. Enim obcaecati illo eligendi, 
			 placeat at nam earum dolore, adipisci veritatis
			  consequuntur asperiores consequatur praesentium 
			  repudiandae ipsa molestias provident velit et magnam. </p>
	</body>
	
</html>